<template>
  <ele-modal
    width="80%"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    title=" '代理用户'"
    :visible.sync="visible"
    @update:visible="updateVisible"
  >
   
    <el-card shadow="never">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="15"> </el-row>
      </el-form>

      <!-- 数据表格 -->
       <ele-pro-table ref="table" :datasource="datasource" :columns="columns">
         <template v-slot:toolbar>


           <el-button
                   size="small"
                   type="info"
                   icon="el-icon-_save"
                   class="ele-btn-icon"
                   @click="onExport"
           >
             导出
           </el-button>

         </template>
      <template v-slot:action="{ row }">
        <el-link
          type="success"
          :underline="false"
          icon="el-icon-_user-group"
          @click="openAgentOperationUser(row)"
        >
          运营用户
        </el-link>
      </template>
    </ele-pro-table>
    
    </el-card>
      <agentUser
        :visible.sync="AgentOperationUserBol"
        :data="current"
       
        @done="reload"
      />
  </ele-modal>
</template>

<script>
import { agent,agentExport  } from '@/api/account/log';
import agentUser from './agentUser';
import { utils, writeFile } from 'xlsx';
const DEFAULT_FORM = {
  account_id: 0
};

export default {
  name: 'agent',
  components: { agentUser },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: [],

    uid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left'
        },
        {
          columnKey: 'index',
          type: 'index',
          width: 45,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },

        {
          prop: 'telphone',
          label: '手机号',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'domain',
          label: '站点',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 400,
          align: 'center',
          resizable: false,
          slot: 'action',
          hideInSetting: true,
          showOverflowTooltip: true
        }
      ],
      // 表单数据
      form: { ...DEFAULT_FORM },
      rules: {
        point: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入操作点数'
          }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      AgentOperationUserBol: false,
      agentBol: false,
      current: '',
      id: ''
    };
  },
  methods: {
     updateVisible(value) {
        this.$emit('update:visible', value);
      },
    /* 表格数据源 */
    datasource({ page, limit, where, order, filterValue }) {
      console.log(this.form);
      where.account_id = this.data.id;
      return agent({
        ...where,
        ...order,
        ...filterValue,
        page,
        limit
      });
    },
      onExport(where) {
          where.account_id = this.data.id;

          agentExport({
              ...where,



          }).then((data) => {

              this.exportData = data.list;
              let array = [];
              array = [
                  ['手机号']
              ];
              this.exportData.forEach((d, i) => {
                  array.push([d.telphone]);
              });
              const sheet = utils.aoa_to_sheet(array);
              // 如果需要设置列宽可以这样写
              sheet["!cols"] = [
                  {wch: 20},
              ];
              writeFile(
                  {
                      SheetNames: ['Sheet1'],
                      Sheets: {
                          Sheet1: sheet
                      }
                  },
                  data.account+ '.xlsx'
              );

          }).catch((e) => {
              this.$message.error(e.message);
          });


      },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ page: 1, where: where });
    },

    openAgentOperationUser(row) {
      this.agent_id = row.id;
      this.domain = row.domain;
      this.current = row;
      this.AgentOperationUserBol = true;
      this.userName = row.telphone;
    },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;

        const data = {
          ...this.form,
          account_id: this.data.id
        };

        addLog(data)
          .then((msg) => {
            this.$message.success(msg);
            this.reload();
            this.loading = false;
          })
          .catch((e) => {
            this.$message.error(e.message);
            this.loading = false;
          });
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      remove(row.id)
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    }
  },
  watch: {
    uid() {
      // this.reload();
    },
    visible(visible) {
      console.log(visible);
      if (visible) {
        if (this.data) {
          this.form = { ...DEFAULT_FORM };
          this.$util.assignObject(this.form, this.data);
          this.isUpdate = true;
          this.form.account_id = this.data.id;
          this.reload();
        } else {
          this.isUpdate = false;
        }
      } else {
        this.$refs['form'].clearValidate();
        this.form = { ...DEFAULT_FORM };
      }
    }
  }
};
</script>
<style lang="less"  scoped>

</style>

